<template>
  <div class="city">
    <div class="header">
      <van-nav-bar
        title="所在城市"
        left-text="返回首页"
        left-arrow
        @click-left="$router.push('/home')"
      >
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div @click="choiceCity">请选择城市</div>
      <div @click="choiceSort">按字母选择</div>
    </div>
    <div class="bottom">
      <!-- 选择城市 -->
      <div
        class="mainOne"
        v-show="flag"
        v-for="(item, index) in this.$store.state.cityList"
        :key="index"
        @click="city(item.name)"
      >
        {{ item.name }}
      </div>
    </div>
    <div>
      <!-- 按字母选择 -->
      <van-index-bar v-show="!flag">
        <van-index-anchor
          v-for="(tm, i) in this.$store.state.arr"
          :key="i"
          :index="tm.letter"
        >
          <!-- <span>{{ tm.data[0] }}</span> -->
          <van-cell
            :title="item.name"
            v-for="(item, index) in tm.data"
            :key="index"
            @click="city1(item.name)"
          />
        </van-index-anchor>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";
Vue.use(IndexBar);
Vue.use(IndexAnchor);

// import { getCity, getCitySort } from "../../api/city";
export default {
  data() {
    return {
      flag: "",
      cityList: [],
      sortCityList: [],
      arr: [],
    };
  },
  methods: {
    //获取城市列表
    choiceCity() {
      this.$store.dispatch("ChoiceCity");
      this.flag = true;
      // this.$router.push("/");
    },
    // 获取城市按字母排序
    choiceSort() {
      this.flag = false;
      this.$store.dispatch("GetCitySort");
    },
    //选择当前城市
    city(name) {
      this.$store.commit("city", name);
      this.$router.push("/");
    },
    //按字母选择
    city1(name) {
      this.$store.commit("city1", name);
    },
  },
};
</script>

<style scoped>
.header {
  /* position: fixed; */
}
.city {
  /* background-color: #ccc; */
}
.main {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.main div {
  width: 1.2rem;
  height: 0.3rem;
  background-color: palevioletred;
  line-height: 0.3rem;
}
.mainOne {
  width: 0.8rem;
  height: 0.4rem;
  background-color: hotpink;
  text-align: center;
  line-height: 0.4rem;
  margin: 5px;
}
.mainTwo {
  width: 0.8rem;
  height: 0.4rem;
  background-color: hotpink;
  text-align: center;
  line-height: 0.4rem;
  margin: 5px;
}
.bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>